<template>
    <n-button color="#333333" block style="margin-bottom: 10px;" @click="show">检索结果分析</n-button>
    <n-modal
        v-model:show="showModal"
        preset="card"
        title="检索结果分析"
        size="huge"
        style="width: 600px;"
        :bordered="false"
    >
        <n-tabs type="segment">
            <n-tab-pane name="author" tab="作者">
                <AuthorCharts :charts_data="charts_info.author_analyze" />
            </n-tab-pane>
            <n-tab-pane name="venur" tab="期刊/会议">
                <VenueCharts :charts_data="charts_info.venue_analyze" />
            </n-tab-pane>
            <n-tab-pane name="year" tab="年份">
                <YearCharts :charts_data="charts_info.year_analyze" />
            </n-tab-pane>
        </n-tabs>
    </n-modal>
</template>

<script setup lang='ts'>
import { ref } from '@vue/reactivity';
import AuthorCharts from '@/views/search/components/AuthorCharts.vue';
import VenueCharts from '@/views/search/components/VenueCharts.vue';
import YearCharts from '@/views/search/components/YearCharts.vue';
import { useMessage } from 'naive-ui';

// 引入消息函数
const message = useMessage()

const showModal = ref(false)

const props = defineProps([
    'charts_info', "is_loading"
])

const show = (() => {
    if (props.is_loading) {
        message.warning("请先等待加载完成")
        return
    }

    showModal.value = true
})

</script>

<style scoped>
</style>